<template >
  <div>
    <el-table :data="rolelist" style="width: 100%">
      <el-table-column prop="username" label="用户名称"> </el-table-column>
      <el-table-column prop="email" label="用户邮箱"> </el-table-column>
      <el-table-column prop="roleName" label="角色名称"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="onSubmit(scope.row.roleId)"
            >添加权限</el-button
          >
          <el-button size="mini" @click="handleEdit(scope.row.roleId)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.roleId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="权限添加" :visible.sync="dialogFormVisible">
      <UserRoleAddView ref="AddUserRoless" :rid="rid"></UserRoleAddView>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="tree">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { GetUserRole } from "@/api/admin";
import UserRoleAddView from "./UserRoleAddView.vue";
export default {
  components: {
    UserRoleAddView,
  },
  data() {
    return {
      rolelist: [],
      form: {},
      dialogFormVisible: false,
      //角色id
      rid: 0,
    };
  },
  methods: {
    //显示
    getshow() {
      GetUserRole().then((res) => {
        this.rolelist = res.data;
      });
    },
    onSubmit(id) {
      this.rid = id;
      this.dialogFormVisible = true;
    },
    tree() {
      this.$refs.AddUserRoless.getChecNodes();
      // this.$refs.AddUserRoless.handleNodeClick();
    },
    //修改
    handleEdit() {},
    tree1() {},
    //删除
    handleDelete() {},
  },
  created() {
    this.getshow();
  },
};
</script>
<style >
</style>